<template>
  <el-card class="box-card" :data="tableData">
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>用户信息</p>
      <el-form-item label="用户名:" class="leftBox">
        <div>
          {{ tableData.user.nickname }}
        </div>
      </el-form-item>
      <el-form-item label="手机号:" class="leftBox">
        <div>
          {{ tableData.user.mobile }}
        </div>
      </el-form-item>
      <el-form-item label="用户编码:" class="leftBox">
        <div>
          {{ tableData.user.id }}
        </div>
      </el-form-item>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>预约人信息</p>
      <el-form-item label="预约人姓名:" class="leftBox">
        <div>{{ tableData.ship_name }}</div>
      </el-form-item>
      <el-form-item label="联系方式:" class="leftBox">
        <div>{{ tableData.ship_mobile }}</div>
      </el-form-item>
      <el-form-item label="预约地址:" class="leftBox">
        <div>{{ tableData.ship_address_ds + tableData.ship_address }}</div>
      </el-form-item>
      <el-form-item label="预约时间:" class="leftBox">
        <div>{{ tableData.yvyue_time }}</div>
      </el-form-item>
      <el-form-item label="勘察项目:" class="leftBox">
        <div>{{ tableData.maint[0].title }}</div>
      </el-form-item>
      <el-form-item label="勘察费用:" class="leftBox">
        <!-- <div>1元</div> -->
        <div>{{ tableData.payeds }}</div>
      </el-form-item>
      <el-form-item label="语音描述:" class="leftBox">
        <!-- <div>{{ tableData.maint[0].files_mp3 }}</div> -->
        <!-- <audio
          controls="controls"
          v-if="
            JSON.stringify(tableData.maint[0].files_mp3).tempFilePath != null
          "
        > -->
        <!-- {{ this.tableData.maint[0].files_mp3 }} -->
        <audio controls="controls">
          <source
            :src="
              JSON.parse(tableData.maint[0].files_mp3) != ''
                ? JSON.parse(tableData.maint[0].files_mp3).tempFilePath == null
                  ? ''
                  : imgHeader +
                    JSON.parse(tableData.maint[0].files_mp3).tempFilePath
                : ''
            "
            type="audio/mp3"
          />
        </audio>
      </el-form-item>
      <el-form-item label="图片/视频:" class="leftBox">
        <!-- <div>{{ tableData.maint[0].files_user }}</div> -->
        <div id="videoBox">
          <div
            v-for="(item, index) in tableData.maint[0].files_user
              ? JSON.parse(tableData.maint[0].files_user)
              : ''"
            :key="index"
          >
            <!-- <div
            v-for="(item, index) in JSON.parse(tableData.maint[0].files_user)"
            :key="index"
          > -->
            <el-image
              v-show="item.fileType === 'image'"
              class="pic"
              style="width: 190px; height: 150px"
              fit="cover"
              :src="
                tableData.maint[0].files_user
                  ? imgHeader +
                    JSON.parse(tableData.maint[0].files_user)[index]
                      .tempFilePath
                  : ''
              "
              :preview-src-list="[
                tableData.maint[0].files_user
                  ? imgHeader +
                    JSON.parse(tableData.maint[0].files_user)[index]
                      .tempFilePath
                  : '',
              ]"
            ></el-image>
            <video
              controls
              width="190"
              height="150"
              v-show="item.fileType === 'video'"
            >
              <source
                :src="
                  tableData.maint[0].files_user
                    ? imgHeader +
                      JSON.parse(tableData.maint[0].files_user)[index]
                        .tempFilePath
                    : ''
                "
                type="video/mp4"
              />
            </video>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>勘察员信息</p>
      <el-form-item label="姓名:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].name }}</div>
      </el-form-item>
      <el-form-item label="联系方式:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].mobile }}</div>
      </el-form-item>
      <el-form-item label="工号:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].id }}</div>
      </el-form-item>
      <el-form-item label="工龄:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].gonling }}</div>
      </el-form-item>
      <el-form-item label="籍贯:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].jiguan }}</div>
      </el-form-item>
      <!-- <el-form-item label="评分:" class="leftBox">
        <div>{{ tableData.authority_user_id[0].mobile }}</div>
      </el-form-item> -->
      <el-form-item label="上门时间:" class="leftBox">
        <div>{{ tableData.authority_user_status_time }}</div>
      </el-form-item>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>发票信息</p>
      <el-descriptions title="">
        <el-descriptions-item label="发票ID" v-if="tableData.fapiao_id">{{
          tableData.invoice[0].id
        }}</el-descriptions-item>
        <el-descriptions-item label="抬头" v-if="tableData.fapiao_id">{{
          tableData.invoice[0].name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号" v-if="tableData.fapiao_id">{{
          tableData.invoice[0].phone
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱" v-if="tableData.fapiao_id">{{
          tableData.invoice[0].email
        }}</el-descriptions-item>
        <el-descriptions-item label="发票类型" v-if="tableData.fapiao_id">{{
          tableData.invoice[0].type == 1 ? "个人" : "企业"
        }}</el-descriptions-item>
        <el-descriptions-item
          label="税号"
          v-if="tableData.fapiao_id && tableData.invoice[0].type == 2"
          >{{ tableData.invoice[0].duty }}</el-descriptions-item
        >
        <el-descriptions-item
          label="企业地址"
          v-if="tableData.fapiao_id && tableData.invoice[0].type == 2"
          >{{ tableData.invoice[0].address }}</el-descriptions-item
        >
        <el-descriptions-item
          label="企业电话"
          v-if="tableData.fapiao_id && tableData.invoice[0].type == 2"
          >{{ tableData.invoice[0].enterprise_phone }}</el-descriptions-item
        >
        <el-descriptions-item
          label="开户行名称"
          v-if="tableData.fapiao_id && tableData.invoice[0].type == 2"
          >{{ tableData.invoice[0].row_name }}</el-descriptions-item
        >
        <el-descriptions-item
          label="开户行账号"
          v-if="tableData.fapiao_id && tableData.invoice[0].type == 2"
          >{{ tableData.invoice[0].account }}</el-descriptions-item
        >

        <el-descriptions-item label="提示" v-if="!tableData.fapiao_id">
          <el-tag size="small">暂无开票</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>工具信息</p>
      <div class="gongJu">
        {{ tableData.maint[0].tool }}
      </div>
    </el-form>

    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>材料信息</p>
      <el-table
        border
        style="width: 100%"
        class="caiLiaoInfo"
        :data="tableData.maintenance_items"
      >
        <el-table-column label="编号" align="center" prop="goods_id">
        </el-table-column>
        <el-table-column label="材料名称" align="center" prop="name">
        </el-table-column>
        <el-table-column label="材料单价" align="center" prop="price">
        </el-table-column>
        <el-table-column label="材料数量" align="center" prop="nums">
        </el-table-column>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.nums).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="材料总价:" class="leftBox">
        <div>{{ tableData.maint[0].material_price }}</div>
      </el-form-item>
      <el-form-item label="包干工时:" class="leftBox">
        <div>{{ tableData.maint[0].maintenance_price }}</div>
      </el-form-item>
      <el-form-item label="勘察费:" class="leftBox">
        <!-- <div>{{ "1.00" }}</div> -->
        <div>{{ tableData.payeds }}</div>
      </el-form-item>
      <el-form-item label="总计:" class="leftBox">
        <div>
          {{
            (
              Number(tableData.maint[0].material_price) +
              Number(tableData.maint[0].maintenance_price) +
              Number(tableData.payeds)
            ).toFixed(2)
          }}
        </div>
      </el-form-item>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>维修工信息</p>
      <el-form-item label="姓名:" class="leftBox">
        <div>
          {{
            tableData.maintenance_info ? tableData.maintenance_info.name : ""
          }}
        </div>
      </el-form-item>
      <el-form-item label="联系方式:" class="leftBox">
        <div>
          {{
            tableData.maintenance_info ? tableData.maintenance_info.mobile : ""
          }}
        </div>
      </el-form-item>
      <el-form-item label="工种:" class="leftBox">
        <div>
          {{
            tableData.maintenance_info
              ? tableData.maintenance_info.user_skill_name
              : ""
          }}
        </div>
      </el-form-item>
      <el-form-item label="工号:" class="leftBox">
        <div>
          {{ tableData.maintenance_info ? tableData.maintenance_info.id : "" }}
        </div>
      </el-form-item>
      <el-form-item label="工龄:" class="leftBox">
        <div>
          {{
            tableData.maintenance_info ? tableData.maintenance_info.gonling : ""
          }}
        </div>
      </el-form-item>
      <el-form-item label="籍贯:" class="leftBox">
        <div>
          {{
            tableData.maintenance_info ? tableData.maintenance_info.jiguan : ""
          }}
        </div>
      </el-form-item>
      <!-- <el-form-item label="评分:" class="leftBox">
        <div>{{ tableData.maintenance_info?tableData.maintenance_info.mobile:'' }}</div>
      </el-form-item> -->
      <el-form-item label="预约维修时间:" class="leftBox">
        <div>
          {{
            tableData.is_up_dizhi_status === 2
              ? tableData.user_weixin_order_times
              : tableData.service_time
          }}
        </div>
      </el-form-item>
      <el-form-item label="上门时间:" class="leftBox">
        <div>
          {{ tableData.maintenance_user_status_time }}
        </div>
      </el-form-item>
      <el-form-item label="提交验收时间:" class="leftBox">
        <div>{{ tableData.wxgtijiaoTime }}</div>
      </el-form-item>
    </el-form>
    <el-form
      :label-position="labelPosition"
      label-width="110px"
      :model="formLabelAlign"
      class="formBox"
    >
      <p>验收问题</p>
      <div v-for="(item, index) in tableData.wenti" :key="index" class="wenTi">
        <el-form-item label="语音描述:" class="leftBox">
          <audio controls="controls">
            <!-- https://bjsf.bjsky.top+{{JSON.parse(item.mp3).tempFilePath}} -->
            <source
              :src="
                item.mp3 != ''
                  ? imgHeader + JSON.parse(item.mp3).tempFilePath
                  : ''
              "
              type="audio/mp3"
            />
          </audio>
        </el-form-item>
        <!-- <el-form-item label="问题图片/视频:" class="leftBox">
        </el-form-item>
        <div id="problemBox">
          <div
            class="one"
            v-for="(item2, index2) in JSON.parse(item.felis)"
            :key="index2"
          >
            <el-image
              class="pic"
              style="width: 150px; height: 150px"
              :fit="fit"
              :src="
                'https://bjsf.bjsky.top' +
                JSON.parse(item.felis)[index2].tempFilePath
              "
            ></el-image>
            <video controls width="190" height="150">
              <source src="" type="video/mp4" />
            </video>
            <div class="">{{ item.title }}</div>
          </div>
        </div> -->
        <el-form-item label="问题图片/视频:">
          <!-- <div>{{ tableData.maint[0].files_user }}</div> -->
          <div id="audioBox">
            <div
              class="audioVideoBox"
              v-for="(item2, index2) in JSON.parse(item.felis)"
              :key="index2"
            >
              <el-image
                v-show="item2.fileType === 'image'"
                class="pic"
                style="width: 190px; height: 150px"
                fit="cover "
                :src="imgHeader + JSON.parse(item.felis)[index2].tempFilePath"
                :preview-src-list="[
                  imgHeader + JSON.parse(item.felis)[index2].tempFilePath,
                ]"
              ></el-image>
              <video
                controls
                width="190"
                height="150"
                v-show="item2.fileType === 'video'"
              >
                <source
                  :src="imgHeader + JSON.parse(item.felis)[index2].tempFilePath"
                  type="video/mp4"
                />
              </video>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="问题描述:" class="leftBox2">
          <div class="problemTitle">{{ item.title }}</div>
        </el-form-item>
        <!-- <div class="problemTitle">{{ item.title }}</div> -->
      </div>
    </el-form>
    <el-button
      type="primary"
      class="backBtn"
      @click="handleBack"
      v-if="backLook"
      >返回</el-button
    >
  </el-card>
</template>
<script>
import { getDingDan, getGongZhongSelect } from "../../../../utils/main";
export default {
  name: "kuaiXiuOrder",
  props: ["waterOrderDetailId"],
  data() {
    return {
      token: sessionStorage.getItem("token"),
      labelPosition: "right",
      formLabelAlign: {
        name: "",
      },
      imgHeader: this.Global.imgHeader,

      tableData: {
        user: { name: "" },
        maint: [{ title: "" }],
        authority_user_id: [{ name: "", mobile: "" }],
        maintenance_info: {
          name: "",
          mobile: "",
          id: "",
          gonling: "",
          jiguan: "",
          utime: "",
        },
      },
      // {
      //   date: "2016-05-02",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1518 弄",
      // },
      // {
      //   date: "2016-05-04",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1517 弄",
      // },
      page: 1,
      limit: 10,
      name: "",
      mobile: "",
      order_id: "",
      options: [],
      wxsmtime: "",
      backLook: false,
    };
  },
  methods: {
    // 返回
    handleBack() {
      this.$router.push(`/dingdan/yhxd`);
    },
    async getSelect() {
      // this.loading = true;
      let res = await getGongZhongSelect(this.token, 1)
        .then((res) => {
          // console.log(this.type, 88888);
          if (res.data.status) {
            this.options = res.data.data;
            this.options.unshift({ id: "kanchayuan", name: "勘察员" });
            // this.total = res.data.data.count;
            // console.log(111, this.options);
            // let timer = setTimeout(() => {
            //   this.loading = false;
            //   clearTimeout(timer);
            // }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            // let timer = setTimeout(() => {
            //   this.$message.error(res.data.msg);
            // }, 5000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    // 获取列表信息
    async getList() {
      // this.loading = true;
      let res = await getDingDan(
        this.token,
        this.page,
        this.limit,
        this.order_id,
        ""
      );
      if (res.data.status) {
        this.tableData = res.data.data.data[0] || [];
        // console.log("ll", this.tableData.maintenance_items);
        // if (this.tableData.maintenance_items.length > 0) {
        //   this.tableData.maintenance_items =
        //     this.tableData.maintenance_items.filter((item) => {
        //       return item.status == 1;
        //     });
        //   // console.log("pp", this.tableData.maintenance_items);
        // }

        this.options.forEach((item) => {
          if (this.tableData.maintenance_info) {
            if (item.id == this.tableData.maintenance_info.user_skill_name) {
              this.tableData.maintenance_info.user_skill_name = item.name;
            }
          }
        });
        console.log(JSON.parse(this.tableData.maint[0].files_mp3), "mp3");
        if (this.tableData.maintenance_info) {
          var date = new Date(this.tableData.maintenance_info.utime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          var D =
            date.getDate() < 10
              ? "0" + date.getDate() + " "
              : date.getDate() + " ";
          var h = date.getHours() + ":";
          var m =
            date.getMinutes() < 10
              ? "0" + date.getMinutes() + ":"
              : date.getMinutes() + ":";
          var s =
            date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds();
          this.wxsmtime = Y + M + D + h + m + s;
        }
        if (this.tableData.maint[0].time_maintenance) {
          var date = new Date(this.tableData.maint[0].time_maintenance * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          var D =
            date.getDate() < 10
              ? "0" + date.getDate() + " "
              : date.getDate() + " ";
          var h =
            date.getHours() < 10
              ? "0" + date.getHours() + ":"
              : date.getHours() + ":";
          var m =
            date.getMinutes() < 10
              ? "0" + date.getMinutes() + ":"
              : date.getMinutes() + ":";
          var s =
            date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds();
          this.tableData.wxgtijiaoTime = Y + M + D + h + m + s;
        }

        // console.log(this.tableData, "fff");
        // let mp3 = JSON.parse(this.tableData.maint[0].files_user);
        // console.log(mp3, "hhh");
        // console.log(this.$route.query.id);
        // let list = res.data.data.data[1] || [];
        // this.tableData = JSON.parse(JSON.stringify(list));
        // console.log(this.tableData);
        // console.log(res.data.data.data);
        // this.total = res.data.data.count;
        // console.log(this.total);
        // console.log(this.tableData, "55555");
        // let timer = setTimeout(() => {
        //   this.loading = false;
        //   clearTimeout(timer);
        // }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
  },
  mounted() {
    console.log("waterOrderDetailId", this.waterOrderDetailId);
    if (this.waterOrderDetailId != undefined) {
      this.order_id = this.waterOrderDetailId;
      this.backLook = false;
    } else {
      this.order_id = this.$route.query.order_id;
      this.backLook = true;
    }
    this.getList();
    this.getSelect();
  },
};
</script>
<style scoped>
.leftBox {
  margin-bottom: 15px;
}

.leftBox div {
  border: 1px solid rgb(175, 174, 174);
  width: 300px;
  min-height: 40px;
  /* height: 40px; */
}

.leftBox2 div {
  /* border: none; */
  width: 100%;
}

.formBox {
  box-shadow: 0px 0px 1px 1px rgb(172, 172, 172);
  margin-bottom: 20px;
  padding: 10px;
}

.formBox p {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}

#videoBox,
#audioBox {
  width: 100%;
  /* height: 200px; */
  display: flex;
  /* justify-content: flex-start; */
  /* align-items: center; */
  padding-left: 0;
  border: none;
  overflow-y: scroll;
}

#videoBox div {
  /* width: 30%; */
  width: 210px;
  height: 80%;
  padding-left: 0;
  border: none;
  /* margin-right: 10px; */
}

#audioBox .audioVideoBox {
  border: none;
  width: 205px;
  /* height: 240px; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 0;
}

.audioVideoBox .problemTitle {
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.formBox .gongJu {
  width: 80%;
  height: 100px;
  border: 1px solid gainsboro;
  padding: 10px;
  overflow: scroll;
}

.caiLiaoInfo {
  margin-bottom: 10px;
  padding-left: 0;
}

div {
  padding-left: 10px;
}

.wenTi {
  margin-top: 50px;
  border-bottom: 1px solid rgb(175, 174, 174);
}
</style>
